<template>
  <div class="sidebar-card sidebar-card-down">
    <div class="arrow-down" @click="Off"></div>
    <div class="up">
      <div class="up-item">
        <div class="item-logo"></div>
        <div class="item-text"></div>
      </div>
    </div>
    <div class="down"></div>
  </div>
  <div class="mask2" @click="GoHome"></div>
</template>

<script setup>
import { defineProps, watch, defineEmits } from 'vue';
const props = defineProps({
  switch: {
    type: Number,
    default: -1,
  },
});
// 监听 props.switch 的变化
watch(
  () => props.switch,
  (newValue) => {
    if (newValue) {
      No();
    }
  },
);
const emit = defineEmits(['sidebar-return']);
function Off() {
  console.log('关闭侧边栏');
  document.querySelector('.sidebar-card').classList.add('sidebar-card-down');

  setTimeout(function () {
    document.querySelector('.sidebar-card').style.zIndex = '0';
  }, 1000);
  emit('sidebar-return');
}
function No() {
  console.log('打开侧边栏');
  console.log(document.querySelector('.sidebar-card'));
  document.querySelector('.sidebar-card').classList.remove('sidebar-card-down');
  document.querySelector('.sidebar-card').style.zIndex = '99';
}
function GoHome() {
  Off();
}
</script>

<style scoped>
.sidebar-card {
  position: absolute;
  height: 41.133%;
  width: 100%;
  border-radius: 16px 16px 0px 0px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  bottom: 0;
  transition: transform 1s ease;
  background-color: rgb(255, 255, 255);
}
.sidebar-card-down {
  transform: translateY(100%);
}
.arrow-down {
  position: absolute;
  top: 1%;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent; /* 左边透明 */
  border-right: 20px solid transparent; /* 右边透明 */
  border-top: 5px solid rgb(202, 201, 201); /* 上边为黑色实心 */
  cursor: pointer;
}
</style>
